MeanJS স্ট্যাকের মাধ্যমে Social Media Login (যেমন Google এবং Facebook) যোগ করা একটি জনপ্রিয় ফিচার, যা ব্যবহারকারীদের জন্য সহজ এবং দ্রুত লগইন প্রক্রিয়া সরবরাহ করে। Passport.js হল একটি জনপ্রিয় লাইব্রেরি যা Node.js এর সাথে ব্যবহার করা হয়, এবং এটি বিভিন্ন সোসাল মিডিয়া (Google, Facebook) লগইন ইন্টিগ্রেশনকে সহজ করে তোলে।
এখানে আমরা দেখব কিভাবে Google এবং Facebook লোগিন ফিচার MeanJS স্ট্যাকে ইন্টিগ্রেট করা যায়।
1. Passport.js সেটআপ এবং ইনস্টলেশন
প্রথমে, Passport.js এবং প্রয়োজনীয় সোসাল মিডিয়া স্ট্র্যাটেজি প্যাকেজ ইনস্টল করতে হবে:
npm install passport passport-google-oauth20 passport-facebook --save
এছাড়া, express-session এবং dotenv (environment variable জন্য) ইনস্টল করুন:
npm install express-session dotenv --save
2. Passport.js কনফিগারেশন
Passport.js সোসাল মিডিয়া লগইন পরিচালনার জন্য ব্যবহার করা হয়, এবং এটি Google এবং Facebook লগইনের জন্য নির্দিষ্ট স্ট্র্যাটেজি সরবরাহ করে। নিচে আমরা Google এবং Facebook স্ট্র্যাটেজি কনফিগার করব।
2.1 Google লগইন স্ট্র্যাটেজি কনফিগারেশন
// server/config/passport.js
const passport = require('passport');
const GoogleStrategy = require('passport-google-oauth20').Strategy;
const dotenv = require('dotenv');
dotenv.config();
passport.use(new GoogleStrategy({
clientID: process.env.GOOGLE_CLIENT_ID,
clientSecret: process.env.GOOGLE_CLIENT_SECRET,
callbackURL: process.env.GOOGLE_CALLBACK_URL
}, function(accessToken, refreshToken, profile, done) {
// প্রোফাইল থেকে তথ্য প্রাপ্তি
// এখানে ইউজারের তথ্য সংরক্ষণ বা আপডেট করা যেতে পারে
return done(null, profile);
}));
2.2 Facebook লগইন স্ট্র্যাটেজি কনফিগারেশন
// server/config/passport.js
const FacebookStrategy = require('passport-facebook').Strategy;
passport.use(new FacebookStrategy({
clientID: process.env.FACEBOOK_APP_ID,
clientSecret: process.env.FACEBOOK_APP_SECRET,
callbackURL: process.env.FACEBOOK_CALLBACK_URL
}, function(accessToken, refreshToken, profile, done) {
// Facebook প্রোফাইল থেকে তথ্য প্রাপ্তি
return done(null, profile);
}));
এখানে, Passport.js এর মাধ্যমে Google এবং Facebook এর জন্য স্ট্র্যাটেজি কনফিগার করা হয়েছে। GoogleStrategy এবং FacebookStrategy এর মাধ্যমে আমরা ইউজারের প্রোফাইল এবং অ্যাক্সেস টোকেন প্রাপ্তি সঠিকভাবে করতে পারি।
2.3 Passport সেশন কনফিগারেশন
// server/config/passport.js
passport.serializeUser(function(user, done) {
done(null, user);
});
passport.deserializeUser(function(user, done) {
done(null, user);
});
এই ফাংশনগুলো ইউজারের সেশন পরিচালনা করে, যেখানে ইউজারের প্রোফাইল সেশন থেকে লোড হয়।
3. Express.js এ Routes কনফিগার করা
এখন, Express.js এ রাউট কনফিগার করতে হবে যাতে ব্যবহারকারীরা সোসাল মিডিয়া লোগিনের জন্য সঠিক রিকোয়েস্ট করতে পারে।
3.1 Google লগইনের জন্য রাউট
// server/routes/auth.routes.js
const express = require('express');
const passport = require('passport');
const router = express.Router();
// Google লগইন রাউট
router.get('/auth/google', passport.authenticate('google', {
scope: ['profile', 'email']
}));
// Google কলব্যাক রাউট
router.get('/auth/google/callback', passport.authenticate('google', {
failureRedirect: '/login'
}), function(req, res) {
res.redirect('/'); // লগইন সফল হলে হোম পেজে রিডিরেক্ট করা
});
3.2 Facebook লগইনের জন্য রাউট
// server/routes/auth.routes.js
// Facebook লগইন রাউট
router.get('/auth/facebook', passport.authenticate('facebook'));
// Facebook কলব্যাক রাউট
router.get('/auth/facebook/callback', passport.authenticate('facebook', {
failureRedirect: '/login'
}), function(req, res) {
res.redirect('/'); // লগইন সফল হলে হোম পেজে রিডিরেক্ট করা
});
4. Environment Variables (Environment Variables)
সোসাল মিডিয়া লগইন ফিচার ব্যবহার করতে Google এবং Facebook এর API কী প্রয়োজন। এই কীগুলো environment variables হিসাবে রাখা উচিত, যাতে কোডে সিক্রেট না থাকে। .env ফাইল ব্যবহার করে এই কীগুলো সেট করুন:
GOOGLE_CLIENT_ID=your-google-client-id
GOOGLE_CLIENT_SECRET=your-google-client-secret
GOOGLE_CALLBACK_URL=http://localhost:3000/auth/google/callback
FACEBOOK_APP_ID=your-facebook-app-id
FACEBOOK_APP_SECRET=your-facebook-app-secret
FACEBOOK_CALLBACK_URL=http://localhost:3000/auth/facebook/callback
এই .env ফাইলটিতে আপনি আপনার Google এবং Facebook অ্যাপ্লিকেশনের কনফিগারেশন কীগুলো রাখতে পারবেন।
5. Frontend (AngularJS) থেকে Social Login:
এখন, AngularJS ফ্রন্টএন্ডে সোসাল মিডিয়া লোগিনের বাটন তৈরি করতে হবে। ব্যবহারকারীরা গুগল বা ফেসবুকের মাধ্যমে লগইন করতে পারবেন।
5.1 Google এবং Facebook Login Button
<!-- public/views/login.html -->
<a href="/auth/google" class="btn btn-danger">Login with Google</a>
<a href="/auth/facebook" class="btn btn-primary">Login with Facebook</a>
এখানে, গুগল এবং ফেসবুকের লগইন বাটন যোগ করা হয়েছে, যা ব্যবহারকারীকে সোসাল মিডিয়া লগইন প্রক্রিয়া শুরু করতে সহায়ক।
6. Securing Routes (রাউট সুরক্ষা)
একবার লগইন সফল হলে, ইউজারকে সুরক্ষিত রাউটে রিডিরেক্ট করা যেতে পারে। উদাহরণস্বরূপ, Dashboard বা Profile পেজে নিয়ে যাওয়ার জন্য।
// server/routes/protected.routes.js
function isAuthenticated(req, res, next) {
if (req.isAuthenticated()) {
return next();
}
res.redirect('/login'); // যদি ইউজার লগইন না করে থাকে
}
router.get('/dashboard', isAuthenticated, function(req, res) {
res.render('dashboard', { user: req.user });
});
এখানে, isAuthenticated middleware ব্যবহার করা হয়েছে, যা রাউটে এক্সেস করার আগে ইউজারের লগইন যাচাই করে।
সারাংশ
MeanJS স্ট্যাকে Social Media Login (Google, Facebook) যোগ করার জন্য, Passport.js ব্যবহৃত হয়। Google এবং Facebook এর জন্য OAuth2.0 স্ট্র্যাটেজি কনফিগার করার মাধ্যমে ইউজারের লগইন এবং সেশন পরিচালনা করা হয়। Express.js এ সোসাল মিডিয়া রাউট কনফিগার করে, ইউজারকে সহজেই লগইন করতে সহায়ক একটি সিস্টেম তৈরি করা হয়। AngularJS ফ্রন্টএন্ড থেকে ইউজারকে গুগল বা ফেসবুকের মাধ্যমে লগইন করার সুযোগ দেওয়া হয়।
Read more
